import React from 'react';
import { connect } from 'dva';
import classnames from 'classnames';
import styles from './index.less';

import { Tooltip, Divider } from 'antd';
import { Dispatch } from 'redux';
import { ConnectProps, ConnectState } from '@/models/connect';
import { MaptoolbarModelState } from '@/models/maptoolbar';
import layerlistImg from '@/components/content/projectPage/images/图层.png';
import daylightImg from '@/components/content/projectPage/images/日光.png';
import measureImg from './images/测量.png';
import sliceImg from '@/components/content/projectPage/images/剖切.png';
import bimtreeImg from '@/components/content/projectPage/images/目录.png';
import drawcolorImg from '@/components/content/projectPage/images/着色.png';
// import bookmarkImg from './images/书签.png';
import basemapImg from './images/base_map_transform.png';
import useHome from '@/components/widgets/Home/useHome';
import useZoom from '@/components/widgets/Zoom/useZoom';
import { WORKING_TAB } from '@/models/app';

interface MapToolbarPropTypes extends ConnectProps {
  maptoolbar: MaptoolbarModelState;
  isGlobalProcessRender: boolean;
  isFullScreen: boolean;
  compareState: boolean;
  curWorkingTab: string;
  dispatch: Dispatch;
}
const MapToolbar: React.FC<MapToolbarPropTypes> = props => {
  const { dispatch, maptoolbar, isFullScreen, curWorkingTab } = props;
  const { activeToolbar } = maptoolbar;
  // @ts-ignore
  const [isLoading, homeReset] = useHome();
  const [_isLoading1, zoomIn, zoomOut] = useZoom();

  // 配置方式侧边栏
  const toolbarList = [
    // { title: '书签', dataIndex: 'bookmark', imgSrc: bookmarkImg },

    { title: '底图', dataIndex: 'basemap', imgSrc: basemapImg },
    { title: '图层', dataIndex: 'layerlist', imgSrc: layerlistImg },
    { title: '日光', dataIndex: 'daylight', imgSrc: daylightImg },
    { title: '测量', dataIndex: 'measure', imgSrc: measureImg },
    { title: '剖切', dataIndex: 'slice', imgSrc: sliceImg },
    { title: '目录', dataIndex: 'bimtree', imgSrc: bimtreeImg },
    { title: '着色', dataIndex: 'drawcolor', imgSrc: drawcolorImg },
  ];

  const changeToolbarActive = (e: any) => {
    const payload = e.currentTarget.dataset.btn;
    dispatch({
      type: 'maptoolbar/updataActiveToolbar',
      payload: payload === activeToolbar ? '' : payload,
    });

    // 重置全局渲染
    // if (props.isGlobalProcessRender) {
    //   dispatch({
    //     type: 'app/updateState',
    //     payload: { isGlobalProcessRender: false },
    //   });
    //   dispatch({
    //     type: 'bimmodel/updateState',
    //     payload: { compareState: false },
    //   });
    // }

    if (props.isFullScreen) {
      dispatch({
        type: 'app/updateState',
        payload: { isFullScreen: false },
      });
    }

    if (maptoolbar.activeWidget != null) {
      if (!maptoolbar.activeWidget.destroyed) {
        maptoolbar.activeWidget.destroy();
        dispatch({
          type: 'maptoolbar/weijiandom',
          payload: null,
        });
        dispatch({
          type: 'maptoolbar/measureSwitchModel',
          payload: '',
        });
      }
    } else {
      dispatch({
        type: 'maptoolbar/measureSwitchModel',
        payload: 'line',
      });
    }
  };

  function handleFullScreenToggle() {
    dispatch({
      type: 'app/updateState',
      payload: {
        isFullScreen: !isFullScreen,
      },
    });
  }

  if (props.compareState) {
    return null;
  }

  let bottom = 326;

  if (curWorkingTab == WORKING_TAB[2]) {
    bottom = 69;
  } else {
  }

  return (
    <div
      className={classnames(styles.toolbar, {
        [styles.toolbarRight]:
          [WORKING_TAB[1], WORKING_TAB[4], WORKING_TAB[3]].indexOf(curWorkingTab) !== -1,
      })}
    >
      {toolbarList.map(({ title, dataIndex, imgSrc, handleClick }) => {
        return (
          <Tooltip key={title} placement="left" title={title}>
            <div
              className={classnames(styles.layerlist, styles.item, {
                [styles.itemActive]: activeToolbar == dataIndex,
              })}
              data-btn={dataIndex}
              onClick={handleClick || changeToolbarActive}
            >
              <img src={imgSrc} alt="" />
            </div>
          </Tooltip>
        );
      })}
      <Tooltip placement="left" title={props.isFullScreen ? '取消全屏' : '地图全屏'}>
        <div
     
          className={classnames(styles.item)}
          onClick={handleFullScreenToggle}
        >
          <img src={require('./images/全屏.png')} alt="" />
        </div>
      </Tooltip>

      <div style={{ position: 'fixed', bottom: 326 }}>
        <Tooltip placement="left" title={'初始视角'}>
          <div className={classnames(styles.item)} onClick={homeReset}>
            <img src={require('./images/初识视角.png')} alt="" />
          </div>
        </Tooltip>

        <div
          title="放大"
          onClick={zoomIn}
          style={{
            marginBottom: 0,
          }}
          className={classnames(styles.item)}
        >
          <img src={require('./images/放大.png')} />
        </div>
        <div
          title="缩小"
          style={{
            marginBottom: 0,
          }}
          onClick={zoomOut}
          className={classnames(styles.item)}
        >
          {/* <hr style={{position:''}} /> */}
          <img src={require('./images/缩小.png')} />
        </div>
      </div>
    </div>
  );
};

export default connect(({ maptoolbar, app, bimmodel }: ConnectState) => {
  const { compareState } = bimmodel;
  return {
    maptoolbar,
    isGlobalProcessRender: app.isGlobalProcessRender,
    isFullScreen: app.isFullScreen,
    compareState,
    curWorkingTab: app.curWorkingTab,
  };
})(MapToolbar);
